<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div :id="idname" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
export default {
  props: {
    idname: {
      type: String,
      required: true,
    },
    datalist: {
      type: Array,
      default: function () {
        return [0.1, 0.1, 0.1];
      },
    },
  },
  data() {
    return {};
  },
  watch: {
    datalist: {
      handler(val, oldVal) {
        this.chartColumn();
      },
      deep: true,
    },
  },
  methods: {
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    chartColumn(type) {
      // 折线图
      let dom = this.idname;
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{c} %",
          axisPointer: {
            type: "shadow",
          },
        },

        grid: {
          top: 10,
          bottom: 20,
          left: 80, // 调整这个属性
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 1],
        },
        yAxis: {
          type: "category",
          data: ["今日采购进度", "今日分拣进度", "今日发货进度"],
          axisLine: {
            show: false,
            lineStyle: {
              color: "#B6B6B6",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            barMinHeight: 10,
            data: this.datalist,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#041119FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00C9FFFF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                borderColor: "#00A6FF",
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  formatter: "{c}%",
                  offset: [5, 2],
                  textStyle: {
                    //数值样式
                    color: "#00C9FF",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };

      this.drawLine(dom, option);
    },
  },
  mounted() {
    this.chartColumn();
  },
};
</script>

<style>
</style>
